<template>
  <TabBarLayout
    class="home"
    :style="{
      backgroundSize: 'auto 100%',
      backgroundPosition: backgroundPosition
    }"
  >
    <div class="nav">
      <Icon
        type="app-shezhi"
        class="nav_icon"
        :class="{ icon_whirl: showSetUp }"
        @click.native="setBgFn"
        size="18"
      />
      <div>我的倒计时</div>
      <Icon
        type="app-jiahao"
        class="nav_icon"
        :class="{ icon_whirl: showAddTask }"
        @click.native="showAddTaskFn"
        size="18"
      />
    </div>
    <div class="content">
      <div class="card header">
        <div class="label">{{ isTimeEnd ? '距离下班' : '下班ヾ(✿ﾟ▽ﾟ)ノ' }}</div>
        <CountDown
          class="time_out"
          :date="countDownDate"
          :formatter="formatter"
          timeOutStr="快跑！快跑！"
          @timeEnd="timeEndFn"
        />
        <div class="today_class">{{ today }}</div>
      </div>
      <!-- 轮播菜单 -->
      <swiper
        class="menu_swiper"
        :acceleration="true"
        :circular="false"
        previous-margin="30%"
        next-margin="30%"
        :current="swiperIndex"
        @change="swiperChange"
      >
        <swiper-item v-for="(item, i) in menuList" :key="item.title">
          <div
            class="menu_swiper_item"
            :class="{ swiper_active: swiperIndex === i }"
            @click="toPath"
          >
            {{ item.title }}
          </div>
        </swiper-item>
      </swiper>
      <!-- 计划列表 -->
      <div class="list_ul">
        <div class="list_li card" v-for="item in planList" :key="item.id">
          <div>
            <div class="li_title">{{ item.title }}</div>
            <div class="li_subTitle">{{ getTodayWeek(item.date) }}</div>
          </div>
          <div class="li_diff_date">76天</div>
        </div>
      </div>
    </div>
    <!-- 设置 -->
    <Setting v-model="showSetUp" />
    <!-- 增加计划 -->
    <AddTaskForm v-model="showAddTask" />
  </TabBarLayout>
</template>
<script>
import TabBarLayout from '@/components/Layouts/TabBarLayout.vue';
import CountDown from '@/components/Countdown/index.vue';
import Icon from '@/components/Icon/index.vue';
import Setting from './components/Setting';
import AddTaskForm from './components/AddTaskForm.vue';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';
export default {
  name: 'home',
  components: {
    TabBarLayout,
    CountDown,
    Setting,
    AddTaskForm,
    Icon
  },
  props: {},
  data () {
    return {
      today: '', // 今日
      countDownDate: null, // 今日下班时间 
      isTimeEnd: false, // 倒计时是否结束
      showSetUp: false, // 打开设置
      showAddTask: false, // 打开新增计划
      planList: [
        {
          id: 1,
          title: '2020倒计时',
          date: '2021-11-11'
        }
      ], // 计划列表
      menuList: [ // 菜单
        { title: '个人中心' },
        { title: '新闻联播' },
        { title: '搞笑段子' },
        { title: '暂未开发1' },
        { title: '暂未开发2' }
      ],
      swiperIndex: 2, // 菜单索引
      bgSizeType: 'w', // 背景图类型 w|横 h|竖
      transitionTime: true
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
    backgroundPosition () {
      const len = this.menuList.length;
      if (this.bgSizeType === 'w') {
        const rate = this.swiperIndex / (len - 1) * 100;
        return rate + '% center'
      }
      return 'center'
    }
  },
  methods: {
    // 获取日期和星期
    getTodayWeek (date) {
      const todayObj = dayjs(date);
      const week = ['一', '二', '三', '四', '五', '六', '七'];
      return todayObj.format('YYYY-MM-DD') + ' 星期' + week[todayObj.day() - 1];
    },
    // 获取下班时间
    getOffWorkTime () {
      this.countDownDate = dayjs().format('YYYY-MM-DD') + ' ' + '17:30:00'
      // console.log(this.countDownDate)
    },
    // 轮播图change事件
    swiperChange ({ detail }) {
      this.swiperIndex = detail.current;
    },
    // 菜单跳转
    toPath () {
      const query = uni.createSelectorQuery().in(this);
      query.select('.uni-swiper-slides').boundingClientRect(data => {
        console.log("得到布局位置信息:", data);
        console.log("节点离页面顶部的距离为" + data.top);
      }).exec();
    },
    // 首页时间格式化
    formatter ({ d, h, m, s, hm }) {
      let str = '';
      if (h) str += h + '时'
      if (h || m) str += m + '分'
      if (h || m || s) str += (s < 10 ? '0' + s : s) + '秒';
      if (!(h || m)) str += hm < 10 ? '0' + hm : hm
      return str;
    },
    timeEndFn () {
      console.log('计算结束');
      this.isTimeEnd = false;
    },
    setBgFn () {
      console.log('设置');
      this.showSetUp = !this.showSetUp;
    },
    // 打开任务侧边连
    showAddTaskFn () {
      this.showAddTask = !this.showAddTask;
    }
  },
  mounted () {
    console.log(this.userInfo)
    this.today = this.getTodayWeek();
    this.isTimeEnd = true;
    this.getOffWorkTime();
  }
};
</script>
<style lang="less" scoped>
.home {
  background-image: url(/static/img/home_bg.jpg);
  position: relative;
  transition: background-position 0.5s ease-out;
  .nav {
    width: 100%;
    padding: 48rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    .nav_icon {
      z-index: 1000;
      transition: all 0.3s;
    }
    .icon_whirl {
      transform: rotate(-585deg);
    }
  }
  .content {
    position: relative;
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    .card {
      padding: 38rpx;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 12rpx;
    }
    .header {
      text-align: center;
      .label {
        color: #f4f4f4;
        font-size: 48rpx;
      }
      .time_out {
        color: #f4f4f4;
        font-size: 96rpx;
        margin: 16rpx 0;
      }
      .today_class {
        color: #f4f4f4;
        font-size: 32rpx;
      }
    }
    .menu_swiper {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      height: 100rpx;
      margin-top: 20rpx;
      swiper-item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .menu_swiper_item {
        font-size: 32rpx;
        font-weight: 800;
        border-radius: 16rpx;
        color: #fff;
        background: linear-gradient(45deg, rgba(252, 203, 144, 1), rgba(213, 126, 235, 1));
        background-clip: text;
        transition: all 0.5s;
        &.swiper_active {
          font-size: 48rpx;
          color: transparent;
        }
      }
    }
    .list_ul {
      margin-top: 140rpx;
      .list_li {
        &:not(:last-child) {
          margin-bottom: 16rpx;
        }
        padding: 16rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #f4f4f4;
        .li_title {
          font-size: 32rpx;
          margin-bottom: 4rpx;
        }
        .li_subTitle {
          font-size: 24rpx;
          color: #ccc;
        }
        .li_diff_date {
          font-size: 34rpx;
        }
      }
    }
  }
}
</style>
